<template>
    <div class="welcome" v-show="!loadinghide">
<!--        <img src="/images/welcome.jpg" alt="">-->
      <img :src="welcomeImageSrc" alt="">
      <div class="welcome-text">火山哥量化交易</div>
    </div>
</template>
<script>
export default {
      computed: {
        // 使用计算属性来根据 Vuex 状态设置 hide
        loadinghide() {
          return this.$store.state.loadingComplete; // 假设 Vuex 状态中有一个叫 loadingComplete 的字段
        },
        welcomeImageSrc() {
          console.log(this.isPC());
          return this.isPC() ? '/images/welcomePC.png' : '/images/welcome.jpg';
        }
      },
      methods: {
        // 检测是否是 PC 端的方法
        isPC() {
          const userAgentInfo = navigator.userAgent;
          const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
          let flag = true;
          for (let v = 0; v < Agents.length; v++) {
            if (userAgentInfo.includes(Agents[v])) {
              flag = false;
              break;
            }
          }
          return flag;
        }
      }
}
</script>
<style>
/* 被注释掉的样式不适合部分安卓机 */
.welcome {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: #000b17;
    animation: welcome 0.5s;
    transition: 0.3s;
    -webkit-transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 垂直排列 */
}

.welcome img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例 */
  position: absolute; /* 使图片成为背景 */
  z-index: -1; /* 置于文字之下 */
}

.welcome-text {
  font-size: 2em; /* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  text-shadow: 0 0 10px rgba(0,0,0,0.5); /* 文字阴影效果 */
  //font-family: '华文行楷', 'Brush Script MT', cursive; /* 使用艺术字体，确保用户设备上有这些字体 */
  z-index: 12; /* 确保文字显示在图片上方 */
  padding: 20px;
  background-color: rgba(0,0,0,0.5); /* 背景色半透明 */
  border-radius: 10px; /* 边框圆角 */
  border: 1px solid #ffffff; /* 白色边框 */
  transform: translateY(200px); /* 向下移动50像素 */
}

</style>
